<template>
  <div id="meituan-refund">
    <c-title text="美团团购">
      <!-- <div class="search-address" slot="left" @click="toCityPage">
        <span>{{ city_name }}</span>
        <van-icon name="arrow-down" size="0.8125rem" />
      </div> -->
    </c-title>

    <div class="search-box">
      <div class="search" style="position: relative;">
        <div style="display: flex;align-items: center;margin-right: .625rem;" @click='show_tips=!show_tips'>
          <div>{{value_category==-1?'全部':value_category==1?'到家':value_category==2?'到店':'买药'}}</div><van-icon name="arrow-down" />
        </div>
        <div class="search-options" v-if="show_tips">
          <div @click="choose(-1)">全部</div>
          <div @click="choose(1)">到家</div>
          <div @click="choose(2)">到店</div>
          <div @click="choose(3)">买药</div>
        </div>
        <!-- <div class='select'><span>到家</span><van-icon name="arrow-down" /></div> -->
        <div class="search-input"  @click="goto()">
          <i class="iconfont icon-sousuo1"></i>
          <input v-model="keyword" readonly type="text" :placeholder="value_category==-1?'请输入关键词搜索':'请输入商品id搜索'"/>
          <button class="search-button">搜索</button>
        </div>
      </div>
    </div>
    <!-- <div class="background_box"></div> -->

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-if="CarouseList && CarouseList.length !== 0">
      <van-swipe-item v-for="item in CarouseList" :key="item.id">
        <img :src="item.pic_url" style="width: 100%;height: 100%;border-radius: 0.625rem;display: block;" @click="link(item.url)" />
      </van-swipe-item>
    </van-swipe>
    <!-- <div class="ment" v-if="(button_group && button_group.length !== 0)">
      <c-ment :datas="fun.chunk(button_group, 10)" @open_dialog="open_dialog"></c-ment>
    </div> -->
    <div style="padding: 0 0.75rem;">
      <van-tabs v-if="category_list && category_list.length !== 0" v-model="active" title-active-color="#00001C"
        line-width="0.9375rem" @click="category_handle">
        <van-tab v-for="(item, i) in category_list" :title="item.name" :key="i">
          <div class="category-box" v-if="item.child.length!==0">
            <span v-for="(c_item, i) in item.child" :key="c_item.id" @click="second_category_handle(c_item, i)"
              :class="{ current_category: second_category_index == i }">{{ c_item.name }}</span>
          </div>
        </van-tab>
      </van-tabs>
      <div class="city-choose" :class="category_list[currrent_category_index]&&category_list[currrent_category_index].child.length==0?'mt-25':''">
        <div @click="toCityPage" style="display: flex;align-items: center;">
          <i class="iconfont icon-zx_map_locate1"></i>
          <span style="font-size: 0.875rem;color:#0F0F0F;line-height: 1;">{{ city_name }}</span>
        </div>
        <i class="iconfont icon-xia"></i>
        <div class="sort" :class="{'sort-current':sort_index==1}" @click="sort(1)">综合排序</div>
        <div class="sort sell" :class="{'sort-current':sort_index==2}"  @click="sort(2)">销量</div>
        <div  v-if="show_price_sort" class="sort evaluate" :class="[sort_index==3&&sort_direct_sale==1?'evaluate-up':sort_index==3&&sort_direct_sale==2?'evaluate-down':'']"  @click="toggle($event,3)">价格</div>
      </div>
    </div>
<!-- 
    <div class="box" v-for="(item, i) in list" :key="i" @click="detail_handle(item)">
      <div class="box-left">
        <div class="box-left-img">
          <img :src="item.couponPackDetail.headUrl" alt="" />
        </div>
        <div v-if="item.deliverablePoiInfo.deliveryDistance " class="distance">距离：{{ item.deliverablePoiInfo.deliveryDistance }}</div>
      <div class="make-money" v-if="item.share_reward.amount !== '0.00'">
          <span class="profit">赚</span>
          <span class="price">{{ $i18n.t('money') }}{{ item.share_reward.amount }}</span>
        </div>  
      </div>
      <div class="box-right">
        <div class="title">{{ item.couponPackDetail.name }}</div>
        <div class="tips">{{ item.deliverablePoiInfo.poiName }}<span v-if="item.availablePoiInfo.availablePoiNum">（{{item.availablePoiInfo.availablePoiNum  }}家通用门店可用）</span></div>
        <div class="sell-price">
          <span class="fz-24">{{ $i18n.t('money') }}</span>{{item.couponPackDetail.sellPrice}}
        </div>
        <div class="original-price">
          <div>原价</div>
          <div style="text-decoration: line-through;">{{ $i18n.t('money') }}{{ item.couponPackDetail.originalPrice }}</div>
        </div>
      </div>
    </div> -->

    
    <div v-if="list && list.length !== 0">
      <Waterfall :list="list" :breakpoints="breakpoints" backgroundColor="#f5f5f5" :loadProps='loadProps' :delay="800">
        <template #item="{ item }">
          <div class="li" :key="item.id" @click="detail_handle(item)">
            <div class="top">
              <div class="availavle-poi-num" v-if="item.availablePoiInfo.availablePoiNum">{{ item.availablePoiInfo.availablePoiNum }}家</div>
              <LazyImg v-if="item.couponPackDetail.headUrl" :url="item.couponPackDetail.headUrl"></LazyImg>
            </div>
            <div class="bottom">
              <div class="title">{{ item.couponPackDetail.name}}</div>
              <div class="band-name" v-if="item.brandInfo.brandName"><i class="iconfont icon-shanghu"></i>{{ item.brandInfo.brandName }}</div>
              <div class="price">
                <div class="current-price">
                  <span class="fz-26" style="margin-right: .1563rem;">¥</span>
                  <span class="fz-34">{{ item.couponPackDetail.sellPrice }}</span>
                </div>
                <div class="original-price">¥{{  item.couponPackDetail.originalPrice}}</div>
              </div>
              <div class="sale-volume" v-if='item.couponPackDetail.saleVolume'><span>{{ item.couponPackDetail.saleVolume }}</span></div>
            </div>

          </div>
        </template>
      </Waterfall>
    </div>

    <van-empty v-if="list && list.length == 0" description="暂无数据" />

  </div>
</template>

<script>
import { scrollMixin } from "../../utils/mixin";
import cMent from "./components/menu.vue";
import loading from 'assets/images/img_default.png';
import "vue-waterfall-plugin/dist/style.css";
import { Waterfall, LazyImg } from "vue-waterfall-plugin";
export default {
  mixins: [scrollMixin],
  components: { Waterfall, cMent, LazyImg },
  data() {
    
    return {
      value_category:-1,
      show_price_sort:false,
      breakpoints: {
        1200: {
          //当屏幕宽度小于等于1200
          rowPerView: 4
        },
        800: {
          //当屏幕宽度小于等于800
          rowPerView: 3
        },
        500: {
          //当屏幕宽度小于等于500
          rowPerView: 2
        }
      },
      loadProps: {
        loading: loading,
        error: loading
      },
      sort_index:0,
      hasNext:true,
      keyword: "",
      choose_index: 1,
      city_name: "请选择",
      SearchValue: "",
      CarouseList: [],
      second_category_index: 0,

      list: [],
      current_page: 1,
      last_page: 1,
      isLoadMore: true,

      cate_id: "",//一级分类id
      second_cate_id: "",//二级分类id

      // sort: {
      //   up: 0,
      //   down: 0
      // },
      category_list: [],
      category_list_2: [],
      button_group: [],

      city_id: "",
      point: {},
      currrent_category_index: 0,
      ids:[],
      sort_direct:0,
      show_tips:false,
      sort_direct_sale:0,
      searchId:'',
      
    };
  },
  beforeRouteEnter(to, from, next) {
  
    next((vm)=>{
      if(from.name=='meituan_refund_search'){
        let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
        if (myLoaction) {
            vm.point = myLoaction.point;
            vm.city_name = myLoaction.city;
        } else {
          vm.fun.getLocation().then((res) => {
              vm.point = res.point;
              vm.city_name = res.city;
            })
            .catch(err => {
              console.log(err);
            });
        }
        vm.getCategory();
      }
    })
  },
  async mounted() {
    console.log(this.$route);
    this.fun.setWXTitle('美团团购');
    this.init();
    let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
    if (myLoaction) {
        this.point = myLoaction.point;
        this.city_name = myLoaction.city;
    } else {
      this.fun
        .getLocation()
        .then((res) => {
          this.point = res.point;
          this.city_name = res.city;
        })
        .catch(err => {
          console.log(err);
        });
    }
    this.getBanner();
    await this.getCategory();
    // await this.buttonGroup()
  },

  methods: {
    init(){
      this.searchId = '';
      this.list = [];
      this.current_page = 1;
      this.city_id = "";
      this.city_name = "请选择";
      this.isLoadMore = true;
      this.value_category = -1;
    },
    
    choose(number){
      this.value_category = number;
      this.show_tips = false;
    },
    toggle(event, n) {
      this.current_page =1;
      this.list = [];
      this.sort_index=3;
      this.sort_direct_sale = this.sort_direct_sale==0?1:this.sort_direct_sale==1?2:1;
      if (event.target.className == 'evaluate') {
          event.target.className = 'evaluate-down';
      } else {
          event.target.className = 'evaluate-up';
      }
      this.getData();
    },
    sort(n){
      this.sort_index = n;
      this.current_page =1;
      this.list = [];
      if(n==2){
        this.sort_direct = this.sort_direct==0?1:this.sort_direct==1?2:1;
      }
      this.getData();
    },
    get_city_id(name) {
      $http.post('plugin.meituan-group-buy.frontend.good.city', { name }, '').then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        let datas = res.data;
        let city_id;
        for (let item in datas) {
          city_id = datas[item][0].id;
        }
        this.city_id = city_id;
        window.localStorage.setItem('meituan_city_id', city_id)
        this.getCategory(city_id);
      })
    },
    detail_handle(item) {
      this.$router.push(this.fun.getUrl('meituan_refund_detail', {id: item.couponPackDetail.skuViewId,ids:this.ids.join('')}));
    },
    toCityPage() {
      this.$router.push(this.fun.getUrl("citypickerPage", {}, { plu: "meituan" }))
    },
    goto() {
      // if (!this.city_id) {
      //   return this.$toast("请先选择城市");
      // }
      // let json = {
      //   lat: this.point.lat,
      //   lng: this.point.lng,
      //   city: this.city_name,
      //   path: 'home',

      // }

      // if (this.keyword) {
      //   json.k = this.keyword;
      // }
      // console.log(json, 'json')
      // localStorage.setItem('meituanCategory', JSON.stringify({ 'cate_id': this.cate_id, 'sId': this.second_cate_id }))
      // this.$router.push(this.fun.getUrl('meituan_refund_search'))
        let ids = this.ids.join('');
        if(this.value_category==1){
          ids = this.category_list[0].ids.join('');
        }else if(this.value_category==2){
          ids = '203';
        }else{
          let index = this.category_list.length-1;
          ids = this.category_list[index].ids.join('');
        }
        let json = {ids,category:this.value_category};
        if(this.value_category==-1){
            json.ids = -1;
            json.category = -1;
        }
      this.$router.push(this.fun.getUrl('meituan_refund_search', json));
    },
    open_dialog(data) {
      if (data.type == 2) {
        this.$router.push(this.fun.getUrl('meituan_refund_search', {id:data.first_cate_id}, {}))
      } else if (data.type == 3) {
        this.link(data.url)
      }
    },
    async buttonGroup() {
      let { data, msg, result } = await $http.get("plugin.meituan-group-buy.frontend.index.button-group");
      if (result == 0) return this.$toast(msg);
      this.button_group = data;
    },
    async getCategory() {
      let { data, msg, result } = await $http.get("plugin.meituan-group-buy.frontend.good.category",'', '');
      if (result == 0) {
        this.getData();
        return this.$toast(msg)
      }
      this.ids = [];
      if(data[0].child&&data[0].child.length!==0){
        this.ids=data[0].child[0].ids;
        this.show_price_sort = data[0].child[0].show_price_sort;
      }else{
        this.ids=data[0].ids||[];
        this.show_price_sort = data[0].show_price_sort;
      }
      this.category_list = data;
      this.getData();
      // this.cate_id = data[0].id;
      // this.category_list = data || [];
      // this.cate_id = data[this.currrent_category_index].id
      // this.getChildrenCategory(this.cate_id);
    },
    getChildrenCategory(first_cate_id) {
      $http.get("plugin.meituan-group-buy.frontend.good.category", { first_cate_id, city_id: this.city_id }, '').then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        this.category_list_2 = res.data;
        this.second_cate_id = res.data[this.second_category_index].id;

      })
    },
    category_handle(index) {
      this.isLoadMore = false;
      this.list = [];
      // this.getChildrenCategory(this.category_list[index].id);
      this.currrent_category_index = index;
   
      this.cate_id = this.category_list[index].id;
      if(this.category_list[index].child.length!==0){
        this.second_category_index = 0;
        this.ids = this.category_list[index].child[0].ids||[];
        this.show_price_sort = this.category_list[index].child[0].show_price_sort;
      }else{
        this.ids = this.category_list[index].ids||[];
        this.show_price_sort = this.category_list[index].show_price_sort;
      }
      this.getData();
    },
    link(url) {
      window.open(url, "_blank");
    },
    async getData(page = 1) {
      let json = {
        page,
        // platform: this.cate_id,
      }
      if(this.ids&&this.ids.length!==0){
        json.ids = this.ids;
      }
      if(this.sort_index==2){
        json.sort_field = 2;
        json.sort_direct = this.sort_direct;
      }
      
      if(this.sort_index==3){
        json.sort_field = 1;
        json.sort_direct = this.sort_direct_sale
      }
      if (this.point) {
        json.latitude = this.point.lat * 1;
        json.longitude = this.point.lng * 1;
      }
      if(this.searchId){
        json.searchId = this.searchId;
      }
      let { result, msg, data } = await $http.post("plugin.meituan-group-buy.frontend.good.good", json, '');
      if (result == 0) {
        return this.$toast(msg);
      }
      this.current_page+=1;
      this.hasNext = data.hasNext;
      this.searchId = data.searchId || '';
      if (page == 1) {
        this.list = data.data || [];
      } else if (page > 1) {
        this.list = this.list.concat(data.data);
      }
      if (data.good_detail.cservice || data.good_detail.group_code) {
        if (data.good_detail.cservice) {
          localStorage.setItem('meituan_cservice', JSON.stringify(data.good_detail.cservice))
        }
        if (data.good_detail.group_code) {
          localStorage.setItem('meituan_group_code', JSON.stringify(data.good_detail.group_code))
        }
      }
      this.isLoadMore = true;
    },
    async getBanner() {
      let { result, msg, data } = await $http.get("plugin.meituan-group-buy.frontend.index.rotation");
      if (result == 0) {
        return this.$toast(msg);
      }
      this.CarouseList = data || [];
    },
    getMoreData() {
      if (!this.hasNext) {
        return;
      }
      this.isLoadMore = false;
      this.getData(this.current_page);
    },
    second_category_handle(item, i) {
      this.isLoadMore = false;
      this.current_page = 1;
      this.list = [];
      this.second_category_index = i;
      // this.second_cate_id = id;
      this.show_price_sort = item.show_price_sort;
      this.ids = item.ids;
      this.getData()
    },
  }
};
</script>

<style lang='scss' scoped>
.search-options{
  position: absolute;
  left: .75rem;
  bottom:-0.85rem;
  background-color: #fff;
  border-radius: .5rem;
  transform: translateY(100%);
  z-index: 100;
  width:70%;
  &::after{
    content: "";
    display: block;
    position: absolute;
    top: -1.125rem;
    left: .625rem;
    border: .625rem solid #fff;
    border-color: transparent transparent #fff transparent;
    z-index: 2;
  }
  div{
    line-height:1.875rem;
    border-bottom: 1px solid #ccc;
    margin: 0 .75rem;
  }
  div:last-child{
    border-bottom: unset;
  }

}

.select{
  display: flex;
  align-items: center;
  margin-right: .625rem;

}

.evaluate-up::before{
    border-bottom: 0.21rem solid #F15353 !important;
}

.evaluate-down::after{
    border-top: 0.21rem solid #F15353 !important;

}
.evaluate,
.evaluate-up,
.evaluate-down{
  position: relative;
  &::after{
    content: '';
    position: absolute;
    top:65%;
    right: -40%;
    display: inline-block;
    width: 0.5rem;
    height: 0.2188rem;
    border-left: 0.21rem solid transparent;
    border-right: 0.21rem solid transparent;
    border-top: 0.21rem solid #AAAAB3;
  }
  &::before{
    content: '';
    position: absolute;
    top:25%;
    right: -40%;
    display: inline-block;
    width: 0.5rem;
    height: 0.2188rem;
    border-left: 0.21rem solid transparent;
    border-right: 0.21rem solid transparent;
    border-bottom: 0.21rem solid #AAAAB3;

  }
}
.mt-25{
  margin-top: .7813rem;
}
.availavle-poi-num{
  position: absolute;
  left:0;
  bottom:0;
  min-width: 2.75rem;
  height: 1.25rem;
  line-height: 1.25rem;
  // background: #000000;
  overflow: hidden;
  border-radius: 0px 0.3125rem 0px 0px;
  z-index: 1;
  color: #FFFFFF;
  font-size:0.75rem;

  &::after{
    z-index:-1;
    content:"";
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color: #000;
    opacity: 0.5;
  }
}
.sale-volume{
  display: flex;
  align-items: center;
  span{
    display: inline-block;
    color:#F96D20;
    margin-top: .3125rem;
    padding: .1563rem .1875rem;
    background-color: #FEE7DB;
    font-size: .625rem;
    border-radius: 0.1875rem;
  }
  // opacity: 0.16;
}
.band-name{
  font-weight: 400;
  font-size: 0.6875rem;
  color: #6E6E79;
  display: flex;
  align-items: center;
  .icon-shanghu{
    font-size:0.625rem;
    margin-right: 0.3125rem;
  }
  margin-bottom: .3125rem;
}
.li {
  border-radius: 0.5rem;
  width: 100%;
  background-color: #fff;
  padding-bottom: .6563rem;
  margin-bottom: 0.375rem;
  overflow: hidden;
  img {
    width: 100% !important;
  }

  .receive {
    font-weight: 400;
    font-size: 0.75rem;
    color: #F15353;
  }

  .tips {
    width: 0.9375rem;
    height: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(91deg, rgba(255, 38, 60, 0.1) 0%, rgba(255, 116, 9, 0.1) 100%);
    border-radius: 0.25rem;
    border: 1px solid rgba(255, 38, 60, 0.3);
    font-weight: 500;
    font-size: 0.6875rem;
    color: #F15353;
    margin-right: 0.1563rem;
  }

  .fz-26 {
    font-size: .8125rem;
  }

  .fz-34 {
    font-size: 1.0625rem;
  }

  .current-price {
    display: flex;
    color: #F15353;
    font-weight: bold;
    align-items: baseline;
  }

  .original-price {
    font-weight: 400;
    font-size: 0.6875rem;
    color: #6E6E79;
    text-decoration-line: line-through;
    margin-left: .1875rem;
    margin-right: .3125rem;
  }

  .discount {
    flex-shrink: 0;
    font-weight: 400;
    font-size: 0.6875rem;
    color: #F15353;
  }

  .top {
    position: relative;
    // display: flex;
    margin: 0;
    padding: 0;

    img {
      max-height: 14.375rem;
      width: 100%;
      overflow: hidden;
      margin: 0;
      display: block;
    }

    .mic-content {
      margin: 0.375rem;
      padding: 0.75rem;
      background-color: #f6f6f6;
      font-size: 0.8125rem;
      color: #3b3b4a;
      line-height: 18px;
      min-height: 48px;
      border-radius: 0.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
    }
  }

  .bottom {
    padding: 0 .625rem;

    .price {
      display: flex;
      align-items: center;
      line-height: 1;
    }

    .title {
      font-weight: 600;
      margin: .6563rem 0 .5625rem;
      font-size: 0.875rem;
      line-height: 1rem;
      display: -webkit-box;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #00001c;
      text-align: left;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-align: left;
    }

    .goods-desc {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: .2813rem;
      line-height: 1;

      span {
        margin-right: .3125rem;
        font-weight: 400;
        font-size: 0.6875rem;
        color: #6E6E79;
      }
    }


  }
}


.city-choose{
  display: flex;
  align-items: center;
  line-height: 1;
  .sort-current{
    color:#F15353 !important;
  }
  .sort{
    color: #6E6E79;
    font-size:0.875rem;
  }
  .sell{
    margin:0 1.5625rem;
  }
  .icon-zx_map_locate1{
    font-size: .75rem;
    margin-right: 0.1563rem;
    margin-left: .1875rem;
  }
  .icon-xia{
    color:#AAAAB3;
    font-size: 0.625rem;
    margin-left:0.2188rem;
    margin-right:1.5938rem;
  }
}
.background_box {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  z-index: -1;
  height: 8.125rem;
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--themeBaseColor)), to(#f5f5f5));
  background-image: -webkit-linear-gradient(var(--themeBaseColor), #f5f5f5);
  background-image: linear-gradient(var(--themeBaseColor), #f5f5f5);
}

.space-around {
  position: relative;
  justify-content: space-around !important;
}

.space-around::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.625rem;
  height: 0.0938rem;
  border-radius: 0.125rem;
  background: #F15353;
}

.my-swipe {
  margin: 0.4375rem 0.8438rem;

}
// ::v-deep .van-nav-bar__title{
//   color:#fff;
// }

// ::v-deep .van-tabs__nav {
//   background-color: unset;
// }

// ::v-deep .van-tabs--line .van-tabs__wrap {
//   height: 36px;
// }

// ::v-deep .van-tab--active {
//   font-weight: bold;
// }

// ::v-deep .van-tabs__line {
//   background-color: #F15353;
// }

.category-box::-webkit-scrollbar {
  display: none;
}

.category-box {
  display: flex;
  align-items: center;
  overflow-y: scroll;
  margin: .75rem 0.875rem 1.0938rem;
  min-height: 1.6rem;

  span {
    height: 1.5rem;
    line-height: 1.5rem;
    padding: 0 0.625rem;
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 0.375rem;
    margin-right: 0.625rem;
    flex-shrink: 0;
    box-sizing: border-box;
  }
}

.fz-24 {
    font-size: 0.75rem;
  }
.box {
  background-color: #fff;
  border-radius: 0.5rem;
  margin: 0.5rem 0.75rem;
  padding: 0.75rem;
  display: flex;

  
  .illustrate {
    position: relative;
    height: 2.75rem;
    background: #FFF5F5;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.6875rem;
    color: #F15353;
  }

  .illustrate::after {
    position: absolute;
    content: "";
    bottom: -0.3rem;
    left: 0.6563rem;
    background: #FFF5F5;
    width: 1.375rem;
    height: 1.375rem;
    transform: rotate(45deg);
  }

  .preferential {
    margin-top: 0.9375rem;
    display: flex;
    color: #F15353;
    font-size: 0.75rem;
    align-items: baseline;
  }

  .preferential-2 {
    margin-top: 0.3438rem;
    display: flex;
    color: #AAAAB3;
    font-size: 11px;
    align-items: baseline;

  }

  .discount {
    height: 1.0313rem;
    line-height: 1.0313rem;
    padding: 0 0.2188rem;
    box-sizing: border-box;
    border-radius: 0.1875rem;
    border: 1px solid #F15353;
    font-size: 0.625rem;
    margin-left: 0.25rem;
  }

  .box-right {
    margin-left: 0.375rem;
    flex: 1;

    .title {
      text-align: left;
      margin-top: 0.375rem;
      font-size: 0.9375rem;
      font-weight: bold;
      color: #00001C;
    }

    .tips {
      font-size: 0.75rem;
      font-weight: 400;
      color: #6E6E79;
      margin: .5625rem 0 ;
      text-align: left;
    }
  }

  .distance {
    width: max-content;
    margin-top: 0.5625rem;
    margin-bottom: .625rem;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1;
    color: #6E6E79;
    text-align: center;

  }

  .box-left {
    flex-shrink: 0;
  }

  .box-left-img {
    width: 6.25rem;
    height: auto;
  }

  img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0.625rem;
  }

  .make-money {
    margin-top: .625rem;
    max-width: 4.9375rem;
    height: 1.5rem;
    line-height: 1.5rem;
    border-radius: .375rem;
    display: flex;
    justify-content: space-between;
    color: #ff7b05;
    border: 1px solid #ff7b05;

    .profit {
      position: relative;
      font-size: 0.75rem;
      padding: 0 0.375rem;
      border-right: 1px dotted #F96D20;
    }

    .price {
      flex: 1;
      text-align: center;
      font-size: 0.8125rem;
      font-weight: bold;
      color: #F96D20;
    }
  }
}
::v-deep .van-tabs__nav{
  background-color:transparent
}

// ::v-deep .van-nav-bar {
//   background-color: var(--themeBaseColor) !important;
// }

// ::v-deep .van-nav-bar {
//   border-bottom: none;
// }

// ::v-deep .van-button--default {
//   background-color: var(--themeBaseColor) !important;
//   color: #fff;
// }

// ::v-deep .van-nav-bar .van-icon {
//   color: #fff;
// }

.van-icon-arrow-down {
  display: flex;
  align-items: center;
  margin-left: 0.1563rem;
}

#meituan-refund {
  position: relative;

  .search-box {
    //   height: 9.3125rem;
    //   background: linear-gradient(180deg, #F15353 0%, #F5F5F5 100%);
  }

  .search {
    display: flex;
    align-items: center;
    padding: 0.3125rem 0.75rem;
  }

  .search-input {
    flex: 1;
    display: flex;
    align-items: center;
    height: 2.25rem;
    background: #FFFFFF;
    border-radius: 1.25rem;
    padding: 0.1875rem 0.25rem 0.1875rem 1.0938rem;

    .icon-sousuo1 {
      font-size: 0.875rem;
      margin-right: 0.2188rem;
      color: #999999;
    }

    input {
      flex: 1;
      border: none;
      border-radius: 100px;
      padding-left: 0.1563rem;
    }
  }

  .search-button {
    padding: 0.375rem 0.8125rem;
    background: var(--themeBaseColor);
    font-size: 0.8125rem;
    border-radius: 1.25rem;
    border: none;
    flex-shrink: 0;
    color: #fff;
  }

  .search-address {
    display: flex;
    align-self: center;
    color: #fff;
    font-size: 0.9375rem;
    margin-left: 0.6875rem;
  }

  .ment {
    background: #fff;
    margin: 0.625rem 0.75rem;
    border-radius: 0.5rem;
  }

  .current_category {
    // color: var(--themeBaseColor);
    color: #F15353;
    border: 1px solid #F15353;
    background-color: #F5E4E4;
  }

  .category {
    display: flex;
    padding: 0.75rem;
    overflow-x: auto;

    span {
      margin-right: 1.5625rem;
      font-size: 0.8125rem;
      flex-shrink: 0;
    }
  }

  .category::-webkit-scrollbar {
    display: none;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background: #f1f1f1;
    padding-bottom: 3.125rem;
  }

  .p-4 {
    padding: 0.1rem 0.25rem;
  }

  .item-center {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
  }

  .img {
    width: 100%;
    height: 10.5938rem;
  }

  .flex {
    display: flex;
  }

  .fs-10 {
    font-size: 0.625rem;
  }

  .between {
    justify-content: space-between;
  }

  .sort {
    position: relative;
  }

  .sort-item {
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    width: 20px;

    &::after {
      content: "";
      left: 0;
      top: 0;
      position: absolute;
      border: 5px solid #000;
      border-top-color: transparent;
      border-bottom-color: #ccc;
      border-left-color: transparent;
      border-right-color: transparent;
    }
  }

  .item-bottom {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem 0.9rem;
  }

  .ml-4 {
    margin-left: 0.25rem;
  }

  .line-through {
    text-decoration: line-through;
  }

  .ml-12 {
    margin-left: 0.75rem;
  }

  .c-999 {
    color: #999;
  }

  .c-FF6238 {
    color: #ff6238;
  }

  .fs-12 {
    font-size: 0.75rem;
  }


  .list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 46%;
    overflow: hidden;
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 0.75rem 0.375rem 0;
  }

  .tik-tok-text {
    color: rgb(255, 255, 255);
    background: rgb(0, 0, 0);
    padding: 0 5px;
    border-radius: 5px;
    margin-right: 5px;
    font-size: 0.75rem;
  }



  .buy {
    color: #999;
    font-size: 0.75rem;
  }




  .tab {
    display: flex;
    justify-content: space-evenly;
    padding-top: 10px;
    padding-bottom: 12px;
  }

  .van-search {
    flex: 1;
  }

  // .top-right {
  //   display: flex;
  //   align-items: center;
  //   flex-direction: column;
  //   margin: 10px 15px;
  //   padding-top: 10px;
  // }

  // .top {
  //   display: flex;
  //   background: #fff;
  //   align-items: center;
  // }
}
.original-price{
  display: flex;
  align-items: baseline;
  line-height: 1;
  font-weight: 400;
  font-size: 0.6875rem;
  color: #AAAAB3;
  margin-top: 0.3438rem;

}
.sell-price{
  display: flex;
  align-items: baseline;
  line-height: 1;
  font-weight: bold;
  color: #F15353;
  font-size: 1.125rem;
}
</style>